<template>
  <div class="ma-content-block   p-4">
    <div class="flex">
        <div class="flex align_center" style="width:calc((100% - 36px) / 4);margin-right:20px;margin-bottom:12px">
          <div>客户名称：</div>
          <a-select  v-model="fromData.user_id" style="flex:1" :filter-option="filterOption" :options="dept_list" :field-names="{ label: 'name', value: 'id' }" allow-clear allow-search
            placeholder="请选择客户名称" />
        </div>
        <div class="flex align_center" style="margin-right:20px;margin-bottom:12px">
          <div>时间筛选：</div>
          <div class="flex align_center" style="flex:1">
            <div style="margin-right:16px">
                <a-button :type="tab == 1?'primary':'dashed'" @click="handleTab(1)">按月</a-button>
            </div>
            <div style="margin-right:16px">
                <a-button :type="tab == 2?'primary':'dashed'" @click="handleTab(2)">按年</a-button>
            </div>
            <div style="margin-right:16px">
                <a-button :type="tab == 3?'primary':'dashed'" @click="handleTab(3)">自定义</a-button>
            </div>
            <a-range-picker
              :mode="tab == 1?'month':tab == 2?'year':'date'"
              :show-time = "tab == 3?true:false"
              :time-picker-props="{ defaultValue: ['00:00:00', '23:59:59'] }"
              format="YYYY-MM-DD HH:mm"
              v-model="fromData.process_time"
              @change="onSelect"
              style="width: 354px;"
            />
          </div>
        </div>
        <div class="flex align_center" style="width:calc((100% - 36px) / 4);margin-bottom:12px">
            <a-button style="margin-right:16px" type="primary"  @click="handleSearch"> 搜索 </a-button>
            <a-button style="margin-right:16px" type="primary"  @click="handleResetting"> 重置 </a-button>
        </div>
    </div>
    <div class="align_center" style="margin-bottom:12px">
            <a-button style="margin-right:16px" type="primary"  @click="addSk"> 新增收款 </a-button>
            <a-button style="margin-right:16px" status="success" type="primary"  @click="sdgx"> 手动更新 </a-button>
            <!-- <a-button style="margin-right:16px" type="primary"  @click="handleResetting"> 重置 </a-button> -->
        </div>
    <a-table 
        ref="exportTableRef" :columns="columns"
        :column-resizable="true" :data="tableData" :scroll="{y:600 }"
        :table-layout-fixed="true" :bordered="{wrapper: true, cell: true}" :pagination="false"
            >
            <template #occurrence_amounts="{record}">
              {{record.occurrence_amounts}} <a-tag color="green" @click="mingxi(record)">明细</a-tag>
            </template>
            <template #received_amounts="{record}">
              {{record.received_amounts}} <a-tag color="green" @click="mingxi2(record)">明细</a-tag>
            </template>
            <template #refund_amounts="{record}">
              {{record.refund_amounts}} <a-tag color="green" @click="mingxi3(record)">明细</a-tag>
            </template>
    </a-table>
    <div class="flex justify_end" style="margin-top: 12px;">
      <a-pagination :total="zongSize" show-page-size :page-size-options="[10,20,50,100,500]" @change="handlePageChange" @page-size-change="handlePageSizeChange" />
    </div>
    <a-modal :mask-closable="false"  v-model:visible="addShow" title="新增/编辑" @cancel="addShow = false" :width="600" :footer="false"  >
      <addindex v-if="addShow" @succ="handleAddSucc">></addindex>
    </a-modal>
    <a-drawer :footer="false" :width="1400" v-model:visible="fseShow">
        <template #title> 已支付明细 </template>
        <fseIndex ref="fseIndexRef"/>
      </a-drawer>
      <a-drawer :footer="false" :width="1400" v-model:visible="fseinShow">
        <template #title> 发生额明细 </template>
        <fseinIndex ref="fseinIndexRef"/>
      </a-drawer>
      <a-drawer :footer="false" :width="1400" v-model:visible="refundShow">
        <template #title> 退款明细 </template>
        <refundIndex ref="refundIndexRef"/>
      </a-drawer>
  </div>
 
</template>
<script setup>
import { ref, reactive,onMounted } from 'vue'
import financialAccountsReceivable from '@/api/financial/financialAccountsReceivable'
import fseIndex from "@/views/financial/accountsReceivable/fse.vue";
import fseinIndex from "@/views/financial/accountsReceivable/fseindex.vue";
import refundIndex from "@/views/financial/accountsReceivable/refund.vue";
import { Message } from '@arco-design/web-vue'
import { request } from "@/utils/request.js";
import { pinyin } from "pinyin-pro"
import tool from '@/utils/tool'
import * as common from '@/utils/common'
import dayjs from 'dayjs';
import addindex from "@/views/financial/accountsReceivable/add.vue";
const crudRef = ref()
const fseIndexRef = ref(null)
const fseinIndexRef = ref(null)
const refundIndexRef = ref(null)
const tab = ref(1)     //  1 本月  2 本年 
const zongSize = ref(0)
const addShow = ref(false)
const fseShow = ref(false)
const fseinShow = ref(false)
const refundShow = ref(false)
// const newDate = new Date();
// // 当天
// const newDay = newDate.getDate();  
// // 当年
// const newYear = newDate.getFullYear();
// // 当月
// const newMonth = (newDate.getMonth() + 1)>9?(newDate.getMonth() + 1):'0' + (newDate.getMonth() + 1);
const sdgx = () => {
  request({
    url: 'financial/accountsReceivable/saveDay',
    method: 'post',
    data: {
    },
  }).then(res => {
    if (res.code == 200 && res.success) {
        Message.success('更新成功！')
        handleDataList()
    }
  })
}
const fromData = ref({
  page:1,
  pageSize:10,
  user_id:'',
  process_time:'',
})
const mingxi = (e) => {
  fseinShow.value = true
  fseinIndexRef.value.open(e)
}
const mingxi2 = (e) => {
  fseShow.value = true
  fseIndexRef.value.open(e)
}
const mingxi3 = (e) => {
  refundShow.value = true
  refundIndexRef.value.open(e)
}
const tableData = ref([])
const dept_list = ref([])
const addSk = () => {
  addShow.value = true
}
const handlePageChange = (e)=>{
    fromData.value.page = e
    handleDataList()
}
const handleTab = (e)=>{
  console.log(e)
  tab.value = e
}
const handleAddSucc = ()=>{
  addShow.value = false
  handleDataList()
}
const onSelect = (e)=>{
  if(tab.value == 1){
      let month = e[1].split('-')[1]
      let nian = e[1].split('-')[0]
      fromData.value.process_time = [e[0] + `-01 00:00:00`,e[1] + `${month == 1 || month == 3 || month == 5 || month == 7 || month == 8 || month == 10 || month == 12?'-31':month == 4 || month == 6 || month == 9 || month == 11?'-30':nian % 4 == 0?'-29':'-28'} 23:59:59`]
  }else if(tab.value == 2){
      fromData.value.process_time = [e[0] + `-01-01 00:00:00`,e[1] + `-12-31 23:59:59`]
  }else if(tab.value == 3){
      fromData.value.process_time = e
  }
  // fromData.value.process_time = [e[0] + ` 00:00:00`,e[1] + ` 23:59:59`] 
}
const handleSearch = ()=>{
  handleDataList()
}
const handleResetting = ()=>{
    fromData.value = {
      page:1,
      pageSize:10,
      user_id:'',
      process_time:'',
    }
    handleDataList()
}
onMounted(()=>{
  handleDeptList()
  handleDataList()
})
const filterOption = (v,option)=>{
    return option.keywords.some(keywords=>keywords.includes(v))
}

const handleDeptList = () => {   //  获取公司列表
  request({
    url: 'system/dept/index',
    method: 'get',
    data: {
      openPage: false,
      remoteOption: {
        filter: {
          type: ['=', 2],
          status: ["=",1]
        },
        select: ["id", "name"],
        sort: { id: "desc" }
      }
    }
  }).then(res => {
    let arr = []
    res.data.map((v,i)=>{
        v.keywords = [
          v.name,
          pinyin(v.name,{toneType:'none',pattern:'first'}).split(' ').join(''),
          pinyin(v.name,{toneType:'none',pattern:'first'}).split(' ').join('').toUpperCase()
        ]
        if(v.status == 1){
          arr.push(v)
        }
    })
    dept_list.value = arr
  })
}
const handlePageSizeChange = (e)=>{
    fromData.value.page = 1
    fromData.value.pageSize = e
    handleDataList()
}
const handleDataList = ()=>{
  financialAccountsReceivable.getList(fromData.value).then(res=>{
    // console.log(crudRef.value.tableRef)
    tableData.value = res.data.items
    zongSize.value = res.data.pageInfo.total
  })
}

const options = reactive({
  id: 'flyos_financial_accounts_receivable',
  rowSelection: {
    showCheckedAll: true
  },
  pk: 'id',
  operationColumn: false,
  operationWidth: 160,
  formOption: {
    viewType: 'modal',
    width: 600
  },
  api: financialAccountsReceivable.getList,
  recycleApi: financialAccountsReceivable.getRecycleList,
  add: {
    show: true,
    api: financialAccountsReceivable.save,
    auth: ['financial:accountsPayable:save']
  },
  edit: {
    show: true,
    api: financialAccountsReceivable.update,
    auth: ['financial:accountsPayable:update']
  },
  // delete: {
  //   show: true,
  //   api: financialAccountsReceivable.deletes,
  //   auth: ['financial:accountsPayable:delete'],
  //   realApi: financialAccountsReceivable.realDeletes,
  //   realAuth: ['financial:accountsPayable:realDeletes']
  // },
  // recovery: {
  //   show: true,
  //   api: financialAccountsReceivable.recoverys,
  //   auth: ['financial:accountsPayable:recovery']
  // },
  import: {
    show: true,
    url: 'financial/accountsPayable/import',
    templateUrl: 'financial/accountsPayable/downloadTemplate',
    auth: ['financial:accountsPayable:import']
  },
  export: {
    show: true,
    url: 'financial/accountsPayable/export',
    auth: ['financial:accountsPayable:export']
  }
})

const columns = reactive([
  // {
  //   title: "付款方",
  //   dataIndex: "user_id",
  //   hide:true,
  // },
  {
    title: "付款方",
    dataIndex: "dept.name",
    hide:true,
  },
  {
    title: "期初金额",
    dataIndex: "initial_amounts",
    addDisplay: false,
    editDisplay: false,
  },
  {
    title: "业务发生额",
    dataIndex: "occurrence_amounts",
    addDisplay: false,
    editDisplay: false,
    slotName:'occurrence_amounts'
  },
  {
    title: "已收款金额",
    dataIndex: "received_amounts",
    addDisplay: false,
    editDisplay: false,
    slotName:'received_amounts'
  },
  {
    title: "退款金额",
    dataIndex: "refund_amounts",
    addDisplay: false,
    editDisplay: false,
    slotName:'refund_amounts'
  },
  {
    title: "应收金额",
    dataIndex: "receivable_amounts",
    addDisplay: false,
    editDisplay: false,
  },
  // {
  //   title: "创建时间",
  //   dataIndex: "process_time",
    
  // },
  
])
</script>
<style lang="less" scoped>
  .buttom{
    padding: 4px 16px; border-radius: 4px;border:1px solid #ccc;
  }
  .actbuttom{
    padding: 4px 16px; border-radius: 4px;border:1px solid rgb(46, 84, 170);
  }
</style>
<script> export default { name: 'financial:accountsPayable' } </script>